<template>
    <div class="icon-title-box">
        <div class="content-box">
            <slot class="icon-item content-item"></slot>
            <span class="text-item content-item">&nbsp;{{text}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "IconTitle",
    props:{
        text:{
            type:String,
            default:''
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @height:7vw;
    .icon-title-box{
        height:@height;
        display:flex;
        justify-content: flex-start;
        align-items: center;
        .content-box{
            display:flex;
            justify-content: flex-start;
            align-items: center;
            .content-item{
                height:@height;
                line-height:@height;
                color:rgba(15, 121, 205, 1);
                font-weight: normal;
            }
            //图标
            .icon-item{
                font-size:4vw;
            }
            //标题文本
            .text-item{
                font-size:3vw;
                .line-ellipsis(1);
            }
        }
    }
}

//pc
@media only screen and (min-width: 576px){
    .icon-title-box{
        display:flex;
        .content-box{
            margin:auto 0;
            display:flex;
            justify-content: flex-start;
            .content-item{
                margin:auto 0;
                height:20px;
                line-height: 20px;
                color:rgba(15, 121, 205, 1);
            }
            //图标
            .icon-item{
                font-size:18px;
            }
            //标题文本
            .text-item{
                font-size:14px;
                .line-ellipsis(1);
            }
        }
    }
}
</style>